<template>
    <div id="ai-soul-page">
        <h2>作品灵感</h2>

        <div class="tags">
            <span class="item" v-for="(item, index) of tagList" :key="index">{{ item.label }}</span>
        </div>
        <div class="ai-soul">
            <div class="column-1 column">
                <AiPicItemTypeTwo class="item" v-for="(item, index) of imageList1" :key="index" :image-url="item.url" :width="item.width" :height="item.height"/>
            </div>
            <div class="column-2 column">
                <AiPicItemTypeTwo class="item" v-for="(item, index) of imageList2" :key="index" :image-url="item.url" :width="item.width" :height="item.height"/>

            </div>
            <div class="column-3 column">
                <AiPicItemTypeTwo class="item" v-for="(item, index) of imageList3" :key="index" :image-url="item.url" :width="item.width" :height="item.height"/>

            </div>
            <div class="column-4 column">
                <AiPicItemTypeTwo class="item" v-for="(item, index) of imageList4" :key="index" :image-url="item.url" :width="item.width" :height="item.height"/>

            </div>

        </div>
    </div>
</template>

<script setup>
import AiPicItemTypeTwo from "../itemcomp/AiPicItemTypeTwo.vue"
import { ref } from "vue"

const imageList4 = [
   

    {
        url: "http://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        width: "100%",
        height: 400
    }, {
        url: "http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
        width: "100%",
        height: 500,
    }, {
        url: "https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560",
        width: "100%",
        height: 500
    }, {
        url: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
        width: "100%",
        height: 400,
    },
    {
        url: "https://gips3.baidu.com/it/u=4091827541,3279273508&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1000_1000",
        width: "100%",
        height: 300
    }
]

const imageList1 = [
    

   
     {
        url: "http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
        width: "100%",
        height: 500,
    }, {
        url: "https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560",
        width: "100%",
        height: 500
    }, {
        url: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
        width: "100%",
        height: 400,
    },
    {
        url: "https://gips3.baidu.com/it/u=4091827541,3279273508&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1000_1000",
        width: "100%",
        height: 300
    }
]


const imageList3 = [
   

    {
        url: "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
        width: "100%",
        height: 300
    },
    {
        url: "http://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        width: "100%",
        height: 400
    }, {
        url: "http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
        width: "100%",
        height: 500,
    },
    
    {
        url: "https://gips3.baidu.com/it/u=4091827541,3279273508&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1000_1000",
        width: "100%",
        height: 300
    }
]


const imageList2 = [
    

    {
        url: "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
        width: "100%",
        height: 300
    },
    {
        url: "https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560",
        width: "100%",
        height: 500
    }, {
        url: "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
        width: "100%",
        height: 400,
    },
    {
        url: "https://gips3.baidu.com/it/u=4091827541,3279273508&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1000_1000",
        width: "100%",
        height: 300
    }
]

const tagList = ref([
    {
        label: "#全部",
        model: "all"
    }, {
        label: "#动漫游戏",
        model: "comic-game"
    }, {
        label: "#摄影",
        model: "phgraph"
    }, {
        label: "#插画",
        model: "picture"
    }, {
        label: "#二次元",
        model: "comic"
    }
])



</script>

<style  scoped>
#ai-soul-page {
    padding: 20px;
}

#ai-soul-page h2 {
    margin-bottom: 50px;
}


#ai-soul-page .tags {
    margin-top: 40px;
}

#ai-soul-page .tags .item {
    margin: 5px 10px;
    padding: 5px 15px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 26px;
    color: gray;
    font-size: 15px;
    box-shadow: 0px 0px 4px rgba(128, 128, 128, 0.5);
}

#ai-soul-page .ai-soul {
    margin-top: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

#ai-soul-page .ai-soul .column {
    width: 24%;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

#ai-soul-page .ai-soul .column .item{
    margin-top: 10px;
}
</style>